<template>
	<view>
		<view class="comments-content" v-for="item in commentsList" :key='item.comment_id'>
			<comments-box :comments='item'></comments-box>
		</view>
		<uni-load-more v-if="commentsList.length===0||commentsList.length>5" iconType="snow" :status="loading"></uni-load-more>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				article_id:'',
				commentsList:[],
				page:1,
				pageSize:5,
				loading:'loading'
			}
		},
		onLoad(query) {
			this.article_id = query.id
			this.getComments()
		},
		onReachBottom() {
			if(this.loading ==='noMore') return;
			//页面上拉事件
			this.page ++;
			this.getComments()
			console.log('------上拉触底')
		},
		methods: {
			getComments(){
				this.$api.get_comments({
					article_id:this.article_id,
					page:this.page,
					pageSize:this.pageSize
				}).then((res)=>{
					const {data} = res;
					if(data.length===0){
						this.loading = 'noMore';
						return 
					}
					let oldFromData = JSON.parse(JSON.stringify(this.commentsList))
					oldFromData.push(...data)
					this.commentsList = oldFromData
					console.log(res)
				})
			},
		}
	}
</script>

<style lang="scss">
	.comments-content{
		padding: 0 15px;
	}
</style>
